/**
 * 公共的ssr构建配置
 **/
// const HtmlWebpackExternalsPlugin = require("html-webpack-externals-plugin"); //把依赖的js使用页面引入，不打包到js文件中
const MiniCssExtractPlugin = require("mini-mk-css-extract-plugin"); //提取css到独立文件
/** --------------！！！注意啦！！！------------ mini-mk-css-extract-plugin插件是mini-css-extract-plugin插件的修改版，解决了css为module时打包后页面渲染的时候class名称不见了的bug **/
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin"); //压缩css文件
const CompressionWebpackPlugin = require("compression-webpack-plugin");
const webpack = require("webpack");
const api_config = process.env.env_config;

let isDev = process.env.env_config === "dev";

module.exports = {
  mode: isDev ? "development" : "production",
  module: {
    rules: [
      {
        test: /\.css$/,
        use: isDev
          ? ["vue-style-loader", "css-loader"]
          : ["vue-style-loader", MiniCssExtractPlugin.loader, "css-loader"],
      },
      {
        test: /\.scss$/,
        use: isDev
          ? [
              "vue-style-loader",
              {
                loader: "css-loader",
                options: { modules: true },
              },
              "sass-loader",
            ]
          : [
              "vue-style-loader",
              MiniCssExtractPlugin.loader,
              {
                loader: "css-loader",
                options: { modules: true },
              },
              "postcss-loader",
              {
                loader: "px2rem-loader",
                options: {
                  renUnit: 37.5, //表示 1rem = 20px, 取值是通过 设计稿的宽度/10
                  remPrecision: 2, //px转rem 精度，小数点后的位数
                },
              },
              "sass-loader",
            ],
      },
    ],
  },
  devtool: isDev ? "source-map" : false,
  plugins: isDev
    ? [
        new webpack.DefinePlugin({
          "process.env": api_config,
        }),
      ]
    : [
        new webpack.DefinePlugin({
          "process.env": api_config,
        }),
        // new HtmlWebpackExternalsPlugin({
        //   externals: [
        //     {
        //       module: "vue",
        //       entry: {
        //         path: "https://cdn.jsdelivr.net/npm/vue@2.6.12",
        //         type: "js",
        //       },
        //       global: "Vue",
        //     },
        //     {
        //       module: "vant",
        //       entry: {
        //         path: "https://cdn.jsdelivr.net/npm/vant@2.8/lib/vant.min.js",
        //       },
        //       global: "vant",
        //     },
        //   ],
        // }),
        new MiniCssExtractPlugin({
          filename: "css/[name]_[contenthash:8].css",
        }),
        new OptimizeCssAssetsPlugin(),
        new CompressionWebpackPlugin({
          asset: "[path].gz[query]",
          algorithm: "gzip",
          test: new RegExp("\\.(js|css|otf|ttf)$"),
          threshold: 10240,
          minRatio: 0.8,
        }),
      ],
};
